<script setup lang="ts">
import { ref } from 'vue';
let isCollapse = ref(false)
let asideWidth = ref('auto')
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
import { RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue';
import { SwitchButton as SwitchButtonIcon } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { RouterName } from '@/router';

const { authorities, userInfo, isLogin, avatar, username } = storeToRefs(useUserStore())
const userStore = useUserStore()
const router = useRouter()
function set() {
router.push({
  name:RouterName.Set
})
}
function logout() {
  userStore.logout();
  router.push({
    name: "Login"
  })
}
const openEnum = (event) => {
  isCollapse.value = true;
  event.stopPropagation()
}
</script>

<template>

    <div class="el-container" >
      <el-aside :width="asideWidth" v-show="isCollapse" class="aside">
        <el-menu default-active="2" class="el-menu-vertical-demo" :router="true">
          <el-menu-item index="1" :route="{ name:RouterName.ArticleList }">
            <el-icon>
              <Document />
            </el-icon>
            <span>文章</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Guide />
              </el-icon>
              <span>地图</span>
            </template>

            <el-menu-item index="2-1" :route="{ name:RouterName.MyMap }">
              <el-icon>
                <Avatar />
              </el-icon>
              <span>我的地图</span>
            </el-menu-item>
            <el-menu-item index="2-2" :route="{ name:RouterName.MapList }">
              <el-icon>
                <Histogram />
              </el-icon>
              <span>数据添加</span>
            </el-menu-item>
            <el-menu-item index="2-3" :route="{name:RouterName.Travel }">
              <el-icon>
                <Promotion />
              </el-icon>
              <span>路径记录</span>
            </el-menu-item>

          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>文件</span>
            </template>
            <el-menu-item index="3-1" :route="{ name:RouterName.FileList }">
              <el-icon>
                <Notebook />
              </el-icon>
              <span>文件列表</span>
            </el-menu-item>
            <el-menu-item index="3-2" :route="{ name:RouterName.UpFile }">
              <el-icon>
                <Upload />
              </el-icon>
              <span>文件上传</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container class="el-container" @click="isCollapse = false">
        <el-header style="font-size: 12px">
          <span style="line-height: 60px;">
            <el-button @click="openEnum" v-if="!isCollapse">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </span>
          <span style="float:right">
            <span style="line-height: 60px;">
              <el-button @click="logout" circle size="large" style="font-size: 16px;float: right;margin: 8px"
                :icon="SwitchButtonIcon">
              </el-button>
              <span style="height: 60px" @click="set">
                <el-avatar :src="userInfo.header_pic" style="height:40px;width: 40px;margin-top: 10px" alt="头像">
                </el-avatar>
              </span>
            </span>
          </span>
        </el-header>
        <el-main id="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>

</template>
<style scoped>
#main {
  height: 100%;
  padding: 10px 10px 40px 10px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.aside {
  overflow: hidden;
}
</style>